<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="1000px"
    @close="closeDialog"
  >
    <el-table
      :data="tableDataClone"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="index"
        prop="date"
        label="阶梯"
        width="180"
        align="center"
      />
      <el-table-column
        prop="name"
        label="起始量(m³)"
        align="center"
      >
        <template #default="scope">
          <el-input v-model="scope.row.from_val" placeholder="起始量(m³)" type="number">
            <template slot="append">m³</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="终止量(m³)"
        align="center"
      >
        <template #default="scope">
          <el-input v-model="scope.row.to_val" placeholder="终止量(m³)" type="number">
            <template slot="append">m³</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="水价(元/m³)"
        align="center"
      >
        <template #default="scope">
          <el-input v-model="scope.row.price" placeholder="终止量(m³)" type="number">
            <template slot="append">m³/元</template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        width="160"
      >
        <template slot="header">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addRow">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="h12" />
    <el-button type="primary" @click="submit">提交</el-button>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    tableDataClone() {
      return deepClone(this.tableData)
    }
  },
  methods: {
    show() {
      this.dialogVisible = true
    },
    hide() {
      this.dialogVisible = false
    },
    addRow() {
      this.tableDataClone.push({
        from_val: '',
        to_val: '',
        price: ''
      })
    },
    handleDelete(index, row) {
      this.tableDataClone.splice(index, 1)
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    submit() {
      this.$emit('submit', this.tableDataClone)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
